<template>
  <section class="main">
    <div class="title">
      <span>订单详情</span>
      <div>
        <el-button type="primary" @click="back()">返回</el-button>
        <el-button icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div>商户名</div>
          <div>{{merchantinfo.merchantName}}</div>
        </div>
        <div class="line">
          <div>商户号</div>
          <div>{{merchantinfo.merchantNo}}</div>
        </div>
        <div class="line">
          <div>门店名</div>
          <div>{{merchantinfo.shopName}}</div>
        </div>
        <div class="line">
          <div>订单号</div>
          <div>{{merchantinfo.outTradeNo}}</div>
        </div>
        <div class="line" v-if="merchantinfo.channelOrderNo">
          <div>渠道订单号</div>
          <div>{{merchantinfo.channelOrderNo}}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>终端号</div>
          <div>{{merchantinfo.terminalNo}}</div>
        </div>
        <div class="line">
          <div>门店号</div>
          <div>{{merchantinfo.shopCode}}</div>
        </div>
        <div class="line">
          <div>流水号</div>
          <div>{{merchantinfo.payTraceNo}}</div>
        </div>
         <div class="line" v-if="merchantinfo.channelTradeNo">
          <div>官方订单号</div>
          <div>{{merchantinfo.channelTradeNo}}</div>
        </div>
      </div>
    </div>

    <div class="title">
      <span>支付信息</span>
    </div>
    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div>支付类型</div>
          <div>{{merchantinfo.typeName}}</div>
        </div>
        <div class="line">
          <div>交易金额</div>
          <div>{{merchantinfo.totalFee}}</div>
        </div>
        <div class="line">
          <div>商家实收金额</div>
          <div>{{merchantinfo.balance}}</div>
        </div>
        <div class="line">
          <div>通道类型</div>
          <div>{{merchantinfo.channelTypeName}}</div>
        </div>
        <div class="line">
          <div>终端交易时间</div>
          <div>{{merchantinfo.payTime}}</div>
        </div>
        <div class="line">
          <div>结算处理时间</div>
          <div>{{merchantinfo.settleDate.substring(0,10)}}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>支付方式</div>
          <div>{{merchantinfo.payModeName}}</div>
        </div>
        <div class="line">
          <div>手续费</div>
          <div>{{merchantinfo.fee}}</div>
        </div>
        <div class="line">
          <div>顾客实付金额</div>
          <div>{{merchantinfo.balance}}</div>
        </div>
        <div class="line">
          <div>{{merchantinfo.typeName}}用户标识</div>
          <div>{{merchantinfo.channelUserId}}</div>
        </div>
        <div class="line">
          <div>订单创建时间</div>
          <div>{{merchantinfo.createTime}}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>支付状态</div>
          <div>
            {{merchantinfo.payStatusCodeName}}
            <span
              class="red"
              v-if="merchantinfo.refundStatus == '01'&& merchantinfo.payStatusCode == '1'"
            >(有退款)</span>
              <!-- <el-button class="magin" type="primary" v-if="merchantinfo.payStatusCode == 1" @click="tradeNotifys()">补发通知</el-button> -->
          </div>
        </div>
        <div class="line">
          <div>支付费率</div>
          <div>{{merchantinfo.rate/10}}‰</div>
        </div>
        <div class="line">
          <div>优惠金额</div>
          <div>
            <span
              v-if="merchantinfo.payStatusCode == 1"
            >{{merchantinfo.offerFee}}</span>
            <span v-else>0</span>
          </div>
        </div>
        <div class="line">
          <div>是否推送</div>
          <div>{{merchantinfo.isNotice == 0?'未推送':'已推送'}}</div>
        </div>
        <div class="line" v-if="merchantinfo.endTime">
          <div>支付完成时间</div>
          <div>{{merchantinfo.endTime}}</div>
        </div>
      </div>
    </div>

    <div v-if="merchantinfo.payStatusCode == 5 || merchantinfo.payStatusCode == 6 || merchantinfo.payStatusCode == 8">
      <div class="title">
        <span>退款信息</span>
      </div>
      <div class="container">
        <div class="itemBox">
          <div class="line">
            <div>原支付订单号</div>
            <div>{{merchantinfo.outRefundNo}}</div>
          </div>
          <div class="line">
            <div>退款完成时间</div>
            <div>{{merchantinfo.settleTime}}</div>
          </div>
        </div>
        <div class="itemBox">
          <div class="line">
            <div>退款金额</div>
            <div>{{merchantinfo.refundFee}}</div>
          </div>
        </div>
        <div class="itemBox">
          <div class="line">
            <div>退款状态</div>
            <div>{{merchantinfo.payStatusMsg}}</div>
          </div>
        </div>
      </div>
    </div>

     <!-- 补发通知 -->
      <el-dialog v-dialogDrag title="补发通知" :visible.sync="bufa" width="45%">
        <div>
          <el-form
          :model="bufaobj"
          status-icon
          label-width="150px"
          class="demo-dynamic"
        >
            <el-form-item :required="true" label="回调地址">
              <el-input type="text" v-model.trim="bufaobj.notifyUrl" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="bufa = false">取消</el-button>
          <el-button @click="tradeNotifysok()">确定</el-button>
        </span>
      </el-dialog>
  </section>
</template>

<script>
import { tradeinfohistory, orderlist,tradeNotify } from "@/api/api";
export default {
  data() {
    return {
      bufa: false,
      bufaobj:{
        notifyUrl:''
      },
      merchantinfo: {
        settleDate:''
      },
      merchantarr: [],
      refundarr: [],
      loading: true,
      id: ""
    };
  },
  watch: {
    //监听路由变化
    $route() {
      this.id = this.$route.query.no;
      console.log(this.id);
      tradeinfohistory({
          id:this.$route.query.no,
          month:this.$route.query.month
      }).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantinfo = res.data;
        //   if (
        //     this.merchantinfo.payStatusCode == "1" &&
        //     this.merchantinfo.refundStatus == "01"
        //   ) {
        //     orderlist({ outRefundNo: this.merchantinfo.outTradeNo }).then(
        //       res => {
        //         // console.log(res);
        //         if (res.code == 405) {
        //           sessionStorage.removeItem("token");
        //           this.$router.push("/login");
        //         } else {
        //           this.refundarr = res.data;
        //           this.loading = false;
        //         }
        //       }
        //     );
        //   }
        }
      });
    }
  },
  created() {
    this.getOrderDetail();
  },
  methods: {
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #EEEDEE;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1])
      ]);
    },
    getOrderDetail() {
      console.log(this.$route.query.no)
      tradeinfohistory({
          id:this.$route.query.no,
          month:this.$route.query.month
      }).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantinfo = res.data;
        //   if (
        //     this.merchantinfo.payStatusCode == "1" &&
        //     this.merchantinfo.refundStatus == "01"
        //   ) {
        //     orderlist({ outRefundNo: this.merchantinfo.outTradeNo }).then(
        //       res => {
        //         // console.log(res);
        //         if (res.code == 405) {
        //           sessionStorage.removeItem("token");
        //           this.$router.push("/login");
        //         } else {
        //           this.refundarr = res.data;
        //           this.loading = false;
        //         }
        //       }
        //     );
        //   }
        }
      });
    },
    // 查询退款
    orderlist() {
      orderlist({ outRefundNo: this.merchantinfo.outTradeNo }).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.refundarr = res.data;
        }
      });
    },
    back() {
      this.$router.back(-1);
    },
    // 打开补发通知
    tradeNotifys(){
      this.bufa = true;
      this.bufaobj.notifyUrl = this.merchantinfo.notifyUrl
     
    },
    // 确定补发
    tradeNotifysok(){
      if(this.bufaobj.notifyUrl){
         tradeNotify({
          out_trade_no: this.merchantinfo.outTradeNo,
          notify_url: this.bufaobj.notifyUrl
          }).then(res => {
            // console.log(res);
            if (res.code == 405) {
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            } else {
            if(res.code == 200){
                this.$message({
                message: res.message,
                type: 'success'
              });
              this.bufa = false
              this.bufaobj.notifyUrl = ''
            }else{
              this.$message.error(res.message);
            }
            }
        });
      }else{
        this.$message.error('清输入回调地址');
      }
      
    }
  },
  mounted() {}
};
</script>

<style scoped>
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .itemBox {
  width: 50%;
}
.container .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container .itemBox .line div:nth-child(1) {
  width: 23%;
  text-align: left;
}
.container .itemBox .line div:nth-child(2) {
  width: 80%;
  text-align: left;
  color: #888888;
}
.container .payBox {
  width: 100%;
}
.container .payBox .thead {
  border-bottom: 1px solid #dddddd;
  display: flex;
  padding-top: 15px;
}
.container .payBox .thead span {
  width: 25%;
  text-align: center;
  display: inline-block;
}
.container .payBox .tbody {
  display: flex;
  padding: 15px 0;
}
.container .payBox .tbody div {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.tabbox {
  width: 100%;
  background: #fff;
}
.tableBox {
  width: 95%;
  margin: 0 auto;
}
.red {
  color: red;
}
.magin{
  margin-left: 5px;
}
</style>
